<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SpringBoot-超级文件带师</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 引入样式 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.0/theme-chalk/index.css" rel="stylesheet">
    <!-- 引入组件库 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.0/index.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
    <script type="text/javascript" src="//unpkg.com/wangeditor/dist/wangEditor.min.js"></script>
</head>
<style>
    .el-header, .el-footer {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;

        color: white;
        text-align: center;
        border: 1px solid #ebeef5;

        background-color: #409EFF;
    }
    .el-header{
        height: auto !important;
    }
    .el-main {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        background-color: white;
        color: #333;
        text-align: center;
    }
    .xx_grid{
        display: grid;grid-template-columns: repeat(auto-fill,400px);grid-gap: 20px 20px;justify-content: center;margin-top: 20px;
    }
    .box-card{
        line-height: 30px;
    }
    .xx_flex{
        display: flex;
        flex-direction: column;
    }
    @media screen and (max-width: 750px) {
        .el-dialog {
            width: 98% !important;
        }
        .xx_grid{
            display: grid;grid-template-columns: repeat(auto-fill,100%);grid-gap: 10px 10px;justify-content: center;margin-top: 20px;
        }
    }
    body{
        margin: 0px;
    }

</style>
<body>
<div id="content" style="display: flex;flex-direction: column;min-height: 100vh;">
    <el-container >
        <el-header><h1>超级文件带师</h1></el-header>

        <el-main style=" justify-content:flex-start;">
            <div>
                <el-button type="primary" icon="el-icon-plus" @click="pre_makedir" circle></el-button>
                <el-button type="primary" icon="el-icon-suitcase-1" @click="CheckUpload" circle></el-button>

<!--                <el-button type="primary" icon="el-icon-s-data" @click="goto_anywhere('http://47.93.127.19:58888/ebb401d2')" circle></el-button>-->
                <el-button type="primary" icon="el-icon-s-data" @click="goto_anywhere('http://182.92.98.89:85/')" circle></el-button>
                <el-button type="primary" icon="el-icon-lock" @click="logout" circle></el-button>
            </div>
            <div class="xx_grid">
                <el-card  shadow="hover" v-for="(item,i) in DirList" style="text-align: left;display: inline-block; " >
                    <div  style="cursor: pointer;margin: 10px;"><el-checkbox v-model="item.checked"><i class="el-icon-s-cooperation"></i>{{item.name}}</el-checkbox></div>

                    <div style="display: flex;flex-direction: row;margin: 10px;align-items: center;">
                        <el-popover
                                placement="top"
                                width="160"
                                v-model="item.visible" style="margin-left: 5px;">
                            <p>确定删除该文件夹吗？为确保数据安全，只删除数据库中的记录，更多操作请前往网盘管理。</p>
                            <div style="text-align: right; margin: 0">
                                <el-button size="mini" type="text" @click="item.visible = false">取消</el-button>
                                <el-button type="primary" size="mini" @click="deleteDir(item)">确定</el-button>
                            </div>
                            <el-button slot="reference" icon="el-icon-s-tools" circle></el-button>
                        </el-popover>

                        <el-button style="margin-left: 5px;" @click="goto(item)" icon="el-icon-link" circle></el-button>
                        <el-button style="margin-left: 5px;" @click="edit(item)" icon="el-icon-edit" circle></el-button>
                        <el-button style="margin-left: 5px;" @click="uploadBaiduCloud(item)" icon="el-icon-upload" circle v-loading.fullscreen.lock="fullscreenLoading" element-loading-text="正在上传到百度云，请耐心等待……"></el-button>
                        <el-tag style="margin-left: 5px;" style="margin-left:10px;">{{item.id}}</el-tag>
                    </div>
                    <el-switch
                            style="margin: 10px;"
                            v-model="item.collect"
                            :active-value="collect_active"
                            :inactive-value="collect_inactive"
                            @change="updateCollect(item)"
                            active-text="开启收集"
                            inactive-text="关闭收集">
                    </el-switch>
                </el-card>
            </div>


            <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" @opened="dialog_opened">
                <div style="display: flex;flex-direction: column;justify-content: center;align-items: flex-start;">
                    <span style="margin: 10px;">文件名名称:</span>
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </div>
                <div style="display: flex;flex-direction: column;justify-content: center;align-items: flex-start;">
                    <span style="margin: 10px;">文件夹简介：</span>
<!--                    <el-input v-model="form.intro" autocomplete="off"></el-input>-->
                    <div id="intro_editor" style="text-align: left;">

                    </div>
                </div>
                <div style="display: flex;flex-direction: column;justify-content: center;align-items: flex-start;">
                    <span style="margin: 10px;">文件命名要求：</span>
<!--                    <el-input type="textarea" v-model="fieldData"></el-input>-->
                    <el-button type="primary" size="mini" style="margin: 10px;" @click="innerVisible = true;app.innerTitle='新增字段'">新增字段</el-button>
                    <el-table
                            :data="fieldData_table"
                            style="width: 100%">
                        <el-table-column label="类型" >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.type=='input'?'输入框':scope.row.type=='select'?'选择框':'数字框' }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="提示"  width="150px" style="width: 100px;">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px;white-space: nowrap;">{{ scope.row.tips }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="默认值" >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px;white-space: nowrap;">{{ scope.row.default=='' || scope.row.default==undefined?'空':scope.row.default }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="连接符" >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px;white-space: nowrap;">{{ scope.row.link=='' || scope.row.link==undefined ?'空':scope.row.link }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="250px">
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        @click="up(scope.row,scope.$index)"
                                >↑</el-button>
                                <el-button
                                        size="mini"
                                        @click="down(scope.row,scope.$index)"
                                >↓</el-button>
                                <el-button
                                        size="mini"
                                        @click="edit_field(scope.row,scope.$index)"
                                        >编辑</el-button>
                                <el-popover
                                        placement="top"
                                        width="160"
                                        v-model="scope.row.visible">
                                    <p>确定删除吗？</p>
                                    <div style="text-align: right; margin: 0">
                                        <el-button size="mini" type="text" @click="scope.row.visible = false">取消</el-button>
                                        <el-button type="primary" size="mini" @click="scope.row.visible  = false;delete_item(scope.row,scope.$index)">确定</el-button>
                                    </div>
                                    <el-button size="mini" type="danger" slot="reference" >删除</el-button>
                                </el-popover>

                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div style="display: flex;flex-direction: column;justify-content: center;align-items: flex-start;">
                    <el-switch
                            v-model="form.collectOn"
                            :active-value="collect_active"
                            :inactive-value="collect_inactive"
                            active-text="开启收集"
                            inactive-text="关闭收集">
                    </el-switch>
                </div>
<!--                内弹窗-->
                <el-dialog
                        width="30%"
                        :title="innerTitle"
                        :visible.sync="innerVisible"
                        append-to-body
                        @closed="closeInner"
                >
                    <div class="xx_flex">
                        <span style="margin: 10px;">类型：</span>
                        <el-select v-model="field_one.type" placeholder="请选择类型" style="width:100%;">
                            <el-option label="输入框" value="input"></el-option>
                            <el-option label="选择框" value="select"></el-option>
                            <el-option label="数字框" value="num"></el-option>
                        </el-select>
                    </div>
                    <div class="xx_flex">
                        <span style="margin: 10px;">提示：</span>
                        <el-input v-model="field_one.tips" autocomplete="off"></el-input>
                    </div>
                    <div class="xx_flex">
                        <span style="margin: 10px;">默认值：</span>
                        <el-input v-model="field_one.default" autocomplete="off"></el-input>
                    </div>
                    <div class="xx_flex">
                        <span style="margin: 10px;">连接符：</span>
                        <el-input v-model="field_one.link" autocomplete="off"></el-input>
                    </div>
                    <div class="xx_flex" v-if="field_one.type=='select'">
                        <span style="margin: 10px;">选项：</span>
                        <el-input v-model="field_one.data" autocomplete="off"></el-input>
                    </div>
                    <div style="margin-top: 20px;display: flex;flex-direction: column;justify-content: flex-end;align-items: flex-end;">
                        <el-button type="primary" size="mini"  @click="inner_go">确定</el-button>
                    </div>

                </el-dialog>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogFormVisible = false;makeDir()">确 定</el-button>
                </div>
            </el-dialog>
        </el-main>
        <el-footer>SpringBoot-SuperDir - power by xiaoxi</el-footer>
    </el-container>
</div>

<script>
    var app = new Vue({
        el: '#content',
        data: {
            innerTitle:"新增字段",
            innerVisible:false,
            dialogTitle:"",
            dialogFormVisible: false,
            form: {
                name: '',
                intro:'',
                collectOn:true,
            },
            formLabelWidth: '120px',
            DirList:[],
            E:null,
            collect_active:1,
            collect_inactive:0,
            fieldData:"",
            fieldData_table:[],
            field_one:{},
            field_modify:{},
            fullscreenLoading: false
        },
        mounted:function(){
            this.getDirList();

        },
        methods:{
            logout:function(){
                var fd = new FormData()
                let config = {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }
                axios.post('Dir_logout', fd,config)
                    .then(res => {
                        console.log('数据是:', res);
                        window.location.href="login.html";
                    })
                    .catch((e) => {
                        console.log('获取数据失败');
                    });
            },
            uploadBaiduCloud:function(item){
                this.fullscreenLoading = true;
                var fd = new FormData()
                fd.append("id",item.id)
                let config = {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }
                axios.post('Dir_upload_BaiduCloud', fd,config)
                    .then(res => {
                        console.log('数据是:', res);
                        this.fullscreenLoading=false;
                        this.$alert(res.data.data, '返回信息', {
                            confirmButtonText: '确定',
                            callback: action => {
                            }
                        })
                    })
                    .catch((e) => {
                        console.log('获取数据失败');
                    });
            },
            closeInner:function(){
                app.field_one={}
            },
            edit_field:function(item,i){
                app.innerTitle="编辑字段"
                app.innerVisible=true
                app.field_one=JSON.parse(JSON.stringify(item))
                app.field_modify=i
            },
            inner_go:function(){
                if(app.innerTitle=="新增字段"){
                    this.insert_field()
                }else{
                    app.innerVisible=false
                    try {
                        let data = app.field_one.data.split(",")
                        app.field_one.data=data
                        Vue.set(app.fieldData_table,app.field_modify,JSON.parse(JSON.stringify(app.field_one)))
                        app.field_one={}
                    }catch (e) {
                        Vue.set(app.fieldData_table,app.field_modify,JSON.parse(JSON.stringify(app.field_one)))
                        app.field_one={}
                    }
                }
            },
            insert_field:function(){
                console.log(app.field_one)
                let temp =app.field_one
                try {
                    let data = temp.data.split(",")
                    temp.data=data
                }catch (e) {
                    console.log("不是选择。")
                }

                //推入数组
                app.fieldData_table.push(JSON.parse(JSON.stringify(temp)))
                //清空对象
                app.field_one={}
                app.innerVisible=false
            },
            delete_item:function(item,i){
                console.log(i)
                app.fieldData_table.splice(i, 1);
            },
            up:function(item,i){
                console.log(item,i)
                if(i<=0){
                    this.$message({
                        showClose: true,
                        message: '已经到顶了。',
                        type: 'warning'
                    });
                    return
                }
                var temp = app.fieldData_table[i - 1];
                Vue.set(app.fieldData_table, i - 1, app.fieldData_table[i]);
                Vue.set(app.fieldData_table, i, temp);
            },
            down:function(item,i){
                console.log(item,i)
                if(i>=app.fieldData_table.length-1){
                    this.$message({
                        showClose: true,
                        message: '已经到底了。',
                        type: 'warning'
                    });
                    return
                }
                var temp = app.fieldData_table[i + 1];
                Vue.set(app.fieldData_table, i + 1, app.fieldData_table[i]);
                Vue.set(app.fieldData_table, i, temp);
            },
            pre_makedir:function(){
                // app.form.name = "";
                // app.form.intro = "";
                app.form.collectOn=1;
                app.form.id=null;
                app.dialogFormVisible = true;
                app.dialogTitle='创建文件夹';
            },
            edit:function(item){
                console.log(item);
                app.dialogTitle="修改文件夹"
                app.dialogFormVisible = true;
                app.form.name = item.name;
                app.form.intro = item.intro;
                app.fieldData=item.fieldData;
                app.fieldData_table=JSON.parse(app.fieldData);
                app.form.collectOn=item.collect;
                app.form.id=item.id;
            },
            deleteDir:function(e){
                console.log(e);
                e.visible = false;
                var fd = new FormData()
                fd.append("id",e.id)
                let config = {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }
                axios.post('Dir_deleteDir', fd,config)
                    .then(res => {
                        console.log('数据是:', res);
                        if(res.data.data==1){
                            this.$message({
                                message: '文件夹已删除。',
                                type: 'success'
                            });
                            this.getDirList();
                        }
                    })
                    .catch((e) => {
                        console.log('获取数据失败');
                    });
            },
            updateCollect:function(e){
                console.log(e)
                var fd = new FormData()
                fd.append("id",e.id)
                fd.append("collect",e.collect)
                let config = {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }
                axios.post('Dir_updateCollection', fd,config)
                    .then(res => {
                        console.log('数据是:', res);
                        if(res.data.data==1){
                            this.$message({
                                message: '状态已更新。',
                                type: 'success'
                            });
                        }
                    })
                    .catch((e) => {
                        console.log('获取数据失败');
                    });
            },
            dialog_opened:function(){
                this.createIntroEditor();
            },
            CheckUpload:function(){
                console.log(app.DirList)
                var temp=[]
                for (var i = 0; i < app.DirList.length; i++) {
                    if(app.DirList[i].checked){
                        temp.push(app.DirList[i])
                    }
                }
                if(temp.length<=0){
                    this.$message({
                        message: '没有勾选需要查询的文件夹。',
                        type: 'warning'
                    });
                    return;
                }
                if(temp.length>2){
                    this.$message({
                        message: '最多只能两个文件夹合并查询哦~',
                        type: 'warning'
                    });
                }else{
                    this.$prompt('请输入匹配姓名的参数行', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                    }).then(({ value }) => {
                        if(value==null || value==""){
                            this.$message({
                                message: '输入参数行错误。',
                                type: 'warning'
                            });
                        }else{
                            if(temp.length>1){
                                window.open("dirManager.html?id="+temp[0].id+"&id2="+temp[1].id+"&where="+value);
                            }else{
                                window.open("dirManager.html?id="+temp[0].id+"&where="+value);
                            }
                        }


                    }).catch(() => {

                    });
                }
            },
            createIntroEditor:function(){
                if(app.E==null){
                    app.E = window.wangEditor
                    app.editor = new app.E('#intro_editor')
                    // 配置 onchange 回调函数
                    app.editor.config.onchange = function (newHtml) {
                        //console.log('change 之后最新的 html', newHtml)
                        app.form.intro = newHtml
                    }
                    // 配置触发 onchange 的时间频率，默认为 200ms
                    app.editor.config.onchangeTimeout = 500 // 修改为 500ms
                    app.editor.create()
                    app.editor.txt.html(app.form.intro); // 重新设置编辑器内容
                }else{
                    console.log("已经创建")
                    app.editor.txt.html(app.form.intro); // 重新设置编辑器内容
                }

            },
            goto_anywhere:function(i){
                window.open(i);
            },
            goto:function(item){
                window.open('upload.html?id='+item.id);
            },
            getDirList:function(){
                axios.get('Dir_getDirList',{
                    params: {
                    }
                })
                    .then(res => {
                        console.log('数据是:', res);
                        app.DirList = res.data.data;
                    })
                    .catch((e) => {
                        console.log('获取数据失败');
                    });
            },
            makeDir:function(){

                let status = app.form.collectOn==false?0:1
                var fd = new FormData()
                fd.append("name",app.form.name)
                fd.append("intro",app.form.intro)
                fd.append("fieldData",JSON.stringify(app.fieldData_table))
                fd.append("collect",status)
                let config = {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }
                var url = "Dir_makeDir"
                if(app.dialogTitle=="修改文件夹"){
                    fd.append("id",app.form.id)
                    url="Dir_modifyDir"
                }
                axios.post(url, fd,config)
                    .then(res => {
                        console.log('数据是:', res);
                        if(res.data.data == 1 && app.dialogTitle=="修改文件夹"){
                            this.$message({
                                message: '恭喜您，修改完成！',
                                type: 'success'
                            });
                            app.getDirList();
                        }else{
                            this.$message({
                                message: '恭喜您，创建文件夹成功！可以开始收集啦~！',
                                type: 'success'
                            });
                            app.getDirList();
                        }
                    })
                    .catch((e) => {
                        console.log('获取数据失败');
                    });
            },
            getHotWord:function () {
                axios.get('getWordInfoByName',{
                        params: {
                            name: app.name
                        }
                    })
                    .then(res => {
                        console.log('数据是:', res);
                        app.wordinfolist = res.data;
                    })
                    .catch((e) => {
                        console.log('获取数据失败');
                    });
            }
        }
    })
</script>

</body>
</html>